<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字环绕</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            min-height: 100vh;
            background-image: url(../img/beijing.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .shell {
            position: relative;
            width: 70%;
            padding: 50px;
        }

        .center {
            text-align: center;
            width: 50%;
            margin: auto;
            padding-top: 20px;
        }

        .center a {
            text-decoration: none;
            font-size: 20px;
            font-family: '楷体';
            color: rgb(25, 25, 26);
        }

        a:first-child {
            float: left;
        }

        a:last-child {
            float: right;

        }

        h1 {
            text-align: center;
            color: coral;
            font-size: 90px;
            margin-left: 100px;
            font: 500 80px '仿宋';
        }

        p {
            color: rgb(25, 25, 26);
            font-size: 22px;
            text-align: justify;
            font-family: '楷体';
        }

        .left {
            height: 500px;
            float: left;
            shape-margin: 20px;
            shape-outside: url(../img/蕾姆1.png);
        }

        .right {
            height: 500px;
            float: right;
            shape-margin: 20px;
            shape-outside: url(../img/初音.png);
            margin: 310px -80px 0 0;
        }
    </style>
</head>

<body>

    </div>
    <div class="shell">
        <img src="../img/蕾姆1.png" alt="" width="300" class="left">
        <img src="../img/初音.png" alt="" width="420" class="right">
        <h1>Little Prince</h1>
        <p>Once when I was six years old I saw a magnificent picture in a book,
            calledTrue Stories from Nature, about the primeval forest.
            <br>
            It was a picture of a boaconstrictor in the act of swallowing an animal.
            Here is a copy of the drawing.
            <br>
            In the book it said: “Boa constrictors swallow their prey whole,
            without chewing it. After that they are notable to move,
            <br>
            and they sleep through the six months that they need for digestion.”
            <br>
            I pondered deeply, then, over the adventures of the jungle.
            And after some work with a colored pencil I succeeded in making my first drawing.
            <br>
            My Drawing Number One. It looked like this:I showed my masterpiece to the grown-ups,
            and asked them whether thedrawing frightened them.
            <br>
            But they answered: “Frighten? Why should any one be frightened by a hat?”
            <br>
            My drawing was not a picture of a hat. It was a picture of a boa constrictor
            digesting an elephant.
            <br>
            But since the grown-ups were not able to understand it, I made another drawing:
            I drew the inside of the boa constrictor,
            <br>
            so that the grown-ups could see it clearly.
            They always need to have things explained.
            <br>
            My Drawing Number Two looked like this:
            The grown-ups’ response, this time, was to advise me to lay aside my drawings
            of boa constrictors,
            <br>
            whether from the inside or the outside, and devote myself instead to geography,
            history, arithmetic and grammar.
            <br>
            That is why, at the age of six,
            I gave up what might have been a magnificent career as a painter.
            <br>
            I had been disheartened by the failure of my Drawing Number One and my
            Drawing Number Two.
            <br>
            Grown-ups never understand anything by themselves,
            and it is tiresome for children to be always and forever explaining things to
            them.
        </p>
        <div class="center">
            <a href="#">上一章</a>
            Little Prince
            <a href="#">下一章</a>
        </div>
</body>

</html>